<template>
  <el-form :model="postForm" :rules="rules" ref="postFormRef">
    <h4>新建文章</h4>
    <el-form-item label="文章标题" prop="contentTitle">
      <el-input v-model="postForm.titleVal"></el-input>
    </el-form-item>
    <el-form-item label="文章内容" prop="contentVal">
      <el-input v-model="postForm.contentVal" type="textarea"></el-input>
    </el-form-item>

    <el-button type="primary" @click="onFormsubmit(postForm)"
      >创建文章</el-button
    >
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { GlobalDataProps } from "../store";
// import type { FormInstance } from "element-plus";
// const ruleFormRef = ref<FormInstance>();
export default defineComponent({
  data() {
    return {
      postForm: {
        titleVal: "",
        contentVal: "",
      },
      rules: {
        contentTitle: [
          {
            message: "文章标题不能为空",
            trigger: "blur",
          },
        ],
        contentVal: [
          {
            required: true,
            message: "文章详情不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  setup() {
    const postFormRef = ref();
    const router = useRouter();
    const store = useStore();

    const onFormsubmit = (postForm: any) => {
      postFormRef.value.validate((valid: boolean) => {
        if (valid) {
          console.log("验证成功");
          const { columnId } = store.state.user;
          const newPost = {
            id: new Date().getTime,
            title: postForm.titleVal,
            content: postForm.contentVal,
            columnId,
            createdAt: new Date().toLocaleString(),
          };
          store.commit("createPost", newPost);
          router.push({ name: "column", params: { id: columnId } });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    };
    return {
      onFormsubmit,
      postFormRef,
      router,
      store,
    };
  },
});
</script>

<style scoped></style>
